<template>
  <div style="margin: 20px">
    <el-descriptions border :column="24">
      <el-descriptions-item label="ID" :span="6">{{ detail.id }}</el-descriptions-item>
      <el-descriptions-item label="标题" :span="6">{{ detail.title }}</el-descriptions-item>
      <el-descriptions-item label="状态" :span="6">{{ labelMap['STATE.' + detail.state] }}</el-descriptions-item>
      <el-descriptions-item :span="6" label="申请模式">{{ labelMap['MODE.' + detail.mode] }}</el-descriptions-item>
      <el-descriptions-item :span="12" label="申请人" width="500px">
        {{
          detail.applyUser ? detail.applyUser.cn : ''
        }}
      </el-descriptions-item>
      <el-descriptions-item :span="12" label="申请时间">{{ detail.applyTime|transformDateFormat }}</el-descriptions-item>
      <el-descriptions-item label="申请说明" :span="24">{{ detail.applyRemark }}</el-descriptions-item>
      <template v-for="(authApprove,index) in detail.authApproves">
        <el-descriptions-item :key="index" :label="'审批人'+(index+1)" :span="8">
          {{ authApprove.approveUser.cn }}
        </el-descriptions-item>
        <el-descriptions-item :key="index" :label="'审批状态'+(index+1)" :span="8">
          {{ authApprove.isAgree ? (authApprove.isAgree === 1 ? '审批通过' : '审批拒绝') : '未审批' }}
        </el-descriptions-item>
        <el-descriptions-item :key="index" :label="'审批时间'+(index+1)" :span="8">
          {{ authApprove.approveTime|transformDateFormat }}
        </el-descriptions-item>
        <el-descriptions-item :key="index" :label="'审批说明'+(index+1)" :span="24">
          {{ authApprove.approveRemark }}
        </el-descriptions-item>
      </template>
    </el-descriptions>
    <div v-for="(authInfo,index) in authInfoList" :key="index">
      <el-divider content-position="left">
        申请信息{{ index + 1 }}
      </el-divider>
      <el-descriptions :column="24" border>
        <el-descriptions-item :span="12" label="使用人">
          <template v-for="(useUser) in authInfo.useUsers">
            {{ useUser.cn }}
          </template>
        </el-descriptions-item>
        <el-descriptions-item :span="12" label="访问IP">
          <template v-for="(ip,i) in authInfo.ips">
            {{ i !== 0 ? ',' + ip : ip }}
          </template>
        </el-descriptions-item>
        <el-descriptions-item :span="6" label="用户类型">{{ authInfo.userType }}</el-descriptions-item>
        <el-descriptions-item :span="18" label="用户名称">
          <template v-for="(username,i) in authInfo.usernames">
            {{ i !== 0 ? ',' + username : username }}
          </template>
        </el-descriptions-item>
        <el-descriptions-item :span="12" label="开始时间">{{ authInfo.startTime|transformDateFormat }}</el-descriptions-item>
        <el-descriptions-item :span="12" label="结束时间">{{ authInfo.endTime|transformDateFormat }}</el-descriptions-item>
        <el-descriptions-item :span="6" label="权限服务">{{ authInfo.authService }}</el-descriptions-item>
        <el-descriptions-item :span="6" label="权限类型">{{ authInfo.authType }}</el-descriptions-item>
        <el-descriptions-item :span="12" label="访问权限">
          <template v-for="(access,i) in authInfo.accesses">
            {{ i !== 0 ? ',' + access : access }}
          </template>
        </el-descriptions-item>
        <el-descriptions-item
          v-for="(authInfoResource, i) in authInfoResourceMap[authInfo.id]" :key="i"
          :label="'访问资源'+(i+1)"
          :span="24"
        >
          <string-attributes-div
            v-for="key in Object.keys(authInfoResource.resource)" :key="key"
            :label="labelMap['RESOURCE.' + detail.mode + '.' + authInfo.authService + '.' + authInfo.authType + '.' + key]"
            :values="authInfoResource.resource[key]"
          />
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script>
import {detail as authDetail, label} from "@/api/auth/auth";
import {list as authInfoList} from "@/api/auth/authInfo";
import {list as authInfoResourceList} from "@/api/auth/authInfoResource";
import StringAttributesDiv from "@/views/common/StringAttributesDiv.vue";

export default {
  name: "DetailDiv",
  components: {StringAttributesDiv},
  props: {
    authId: {type: Number, default: null}
  },

  data() {
    return {
      detail: {},
      accesses: [],
      resources: {},
      labelMap: {},
      authInfoList: [],
      authInfoResourceMap: {}
    }
  },

  watch: {
    'authId': {
      handler(val) {
        label().then(res => {
          this.labelMap = res.data
          if (val !== null) {
            this.accesses = []
            this.resources = {}
          }
        })

        if (this.authId) {
          this.detail = {}
          this.authInfoList = []
          this.authInfoResourceMap = {}

          authDetail(this.authId).then(res => {
            this.detail = res.data
          })

          authInfoResourceList({authId: this.authId}).then(res => {
            res.data.forEach(ele => {
              let value = this.authInfoResourceMap[ele.authInfoId]
              if (!value) {
                value = []
              }
              value.push(ele)
              this.authInfoResourceMap[ele.authInfoId] = value
            })

            authInfoList({authId: this.authId}).then(res => {
              this.authInfoList = res.data
            })
          })
        }
      },
      immediate: true
    }
  },

  methods: {}
}
</script>

<style scoped>

</style>
